<template>
  <view
    class="content-progress px-[50rpx] py-[56rpx] box-border module-part min-h-[50vh]"
  >
    <view class="steps-container">
      <view
        v-for="(step, index) in options"
        :key="index"
        class="steps-item flex items-stretch"
      >
        <view class="icon-container w-[30rpx] mr-[28rpx]">
          <view class="h-[100%] flex flex-col items-center">
            <view
              class="w-[30rpx] h-[30rpx] mt-[5rpx]"
              v-if="step.status === 0"
            >
              <image
                src="@/static/images/iocn-completed.png"
                mode="'aspectFit'"
                class="w-[100%] h-[100%]"
              />
            </view>
            <view
              class="w-[30rpx] h-[30rpx] mt-[5rpx]"
              v-else-if="step.status === 1"
            >
              <image
                src="@/static/images/icon-pendding.png"
                mode="'aspectFit'"
                class="w-[100%] h-[100%]"
              />
            </view>
            <view
              v-else
              class="w-[18rpx] h-[18rpx] bg-[#D8D8D8] rounded-[50%]"
            ></view>
            <template v-if="index == options.length - 1">
              <view
                class="w-[1rpx] h-[50rpx] border-l-[1rpx] border-l-[#D8D8D8] border-l-dashed mt-[6rpx]"
              ></view>
            </template>
            <template v-else>
              <view
                v-if="index !== 0"
                class="w-[1rpx] h-[100%] min-h-[96rpx] bg-[#1e92f0] mt-[10rpx]"
              ></view>
            </template>
          </view>
        </view>
        <view class="flex-1 flex flex-col">
          <text class="text-[#222222] text-[32rpx]">{{ step.title }}</text>
          <text class="text-[#999999] text-[28rpx] my-[12rpx]">{{
            step.desc
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const options = reactive(
  [
    { title: "案件结案", desc: "", status: 2 },
    { title: "待开庭", desc: "预计开庭时间：2024-12-19 10:30", status: 1 },
    { title: "场地时间确认", desc: "2024-12-19 场地时间协调成功", status: 0 },
    {
      title: "巡回审判审核通过",
      desc: "2024-12-16 巡回审判审核通过",
      status: 0,
    },
    {
      title: "巡回审判申请提交",
      desc: "2024-12-14 巡回审判申请成功提交",
      status: 0,
    },
  ].reverse() // 通过数组反转实现倒序);
);
</script>

<style lang="scss" scoped>
.content-progress {
  /* 容器样式 */
  .steps-container {
    display: flex;
    flex-direction: column-reverse; /* 关键倒序属性 */
  }

  .steps-item:last-child {
    .icon-container {
      padding-top: 15rpx;
    }
  }

  /* 旋转动画 */
  @keyframes rotating {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .rotating {
    animation: rotating 1.5s linear infinite;
  }
}
</style>
